﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="./css/index_.css">
</head>

<body>
    <a style="position: absolute;z-index: 10; left: 10px;top:10px" href="/echarts/lj/index.html"><img src="./images/home.png" width="25" alt="" srcset=""></a>
    <div class="container">
        <div class="header" style="padding:0">自然资源灾害隐患分析</div>
        <div class="main">
            <div class="left">
                <div class="common-line flex-3">
                    <div class="comon-header">地址灾害类型占比</div>
                    <div class="chart">
                        <div id="pie-chart" style="height: 100%; width: 100%;"></div>
                    </div>
                </div>
                <div class="common-line flex-4">
                    <div class="comon-header">地质灾害威胁对象分布</div>
                    <div class="chart">
                        <div id="bar-chart" style="height: 100%; width: 100%;"></div>
                    </div>
                </div>
                <div class="common-line flex-4">
                    <div class="comon-header">地质灾害隐患规模占比</div>
                    <div class="chart">
                        <div id="echarts_1" style="height: 100%; width: 100%;"></div>
                    </div>
                </div>

            </div>
            <div class="content flex direction">
                <!-- <div class="comon-header" style=" padding-top: 1%;">自然灾害易发区</div> -->
                <div style="height: 100%; position: relative;" class="flex-8">
                    <div class="map" id="map-chart" style="width: 100%; height: 100%;"></div>
                    <ul class="map-legend">
                    </ul>
                </div>
                <div class="common-line flex-2">
                    <div class="comon-header" style=" padding-top: 1%;">全区森林资源分布情况</div>
                    <div class="chart">
                        <div id="line-chart" style="height: 100%; width: 100%;"></div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="common-line flex-3">
                    <div class="comon-header">各乡镇地灾隐患点数量</div>
                    <div class="chart">
                        <div id="progress1-chart" style="height: 100%; width: 100%;"></div>
                    </div>
                </div>
                <div class="common-line flex-4">
                    <div class="comon-header">全区森林资源占比</div>
                    <div class="chart">
                        <div id="senlin-chart" style="height: 100%; width: 100%;"></div>
                    </div>
                </div>
                <div class="common-line flex-4">
                    <div class="comon-header">地灾安全隐患防护措施</div>
                    <div class="chart">
                        <div id="radar-chart" style="height: 100%; width: 100%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="/echarts/js/jquery.min.js"></script>
<script type="text/javascript" src="/echarts/js/echarts.min.js"></script>
<script type="text/javascript" src="./js/new_file.js"></script>
<script type="text/javascript" src="./js/maps.js"></script>

</html>